<!DOCTYPE html>

<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <script src="https://localhost.paypal.com:9001/sdk.js?client-id=alc_client1"></script>
  <script src="https://localhost.paypal.com:9001/sdk-constants.js"></script>
</head>

<body>
  <style>
    p {
      border: 1px solid lightblue;
      padding: 10px 20px;
      display: inline-block;
      margin: 10px;
      vertical-align: top;
    }
  </style>

  <script>
    const colors = ["gold", "blue", "silver", "black", "white"];
    const widths = ["750px", "450px", "300px", "220px", "150px"];
    const fis = ["venmo", "credit"];
    const taglines = [true, false];
    const labels = ["checkout", "pay", "buynow"];
    const instruments = ["card", "bank", "balance", "credit"];
    const shapes = ["rect", "pill"];

    const buttonOpts = [];

    for (const instrument of instruments) {
      buttonOpts.push({
        style: {
          layout: "horizontal",
          tagline: false,
        },
        fundingEligibility: {
          paypal: {
            eligible: true,
          },
          paylater: {
            eligible: true,
          },
        },
        userIDToken: "abc123",
        server: {
          wallet: {
            paypal: {
              instruments: [
                {
                  type: instrument,
                  label: "••1337",
                  oneClick: instrument === "card" || instrument === "balance",
                },
              ],
            },
          },
        },
      });

      if (instrument !== "credit") {
        buttonOpts.push({
          fundingSource: "paypal",
          fundingEligibility: {
            paypal: {
              eligible: true,
            },
            paylater: {
              eligible: true,
            },
          },
          userIDToken: "abc123",
          server: {
            wallet: {
              paypal: {
                instruments: [
                  {
                    type: instrument,
                    label: "••1337",
                    oneClick: instrument === "card" || instrument === "balance",
                  },
                ],
              },
            },
          },
        });
      }

      if (instrument === "credit") {
        buttonOpts.push({
          style: {
            layout: "horizontal",
            tagline: false,
          },
          fundingEligibility: {
            paypal: {
              eligible: true,
            },
            credit: {
              eligible: true,
            },
          },
          userIDToken: "abc123",
          server: {
            wallet: {
              paypal: {
                instruments: [
                  {
                    type: instrument,
                    label: "••1337",
                    oneClick: instrument === "card" || instrument === "balance",
                  },
                ],
              },
              credit: {
                instruments: [
                  {
                    type: instrument,
                    label: "••1337",
                    oneClick: instrument === "card" || instrument === "balance",
                  },
                ],
              },
            },
          },
        });

        buttonOpts.push({
          fundingEligibility: {
            paypal: {
              eligible: true,
            },
            credit: {
              eligible: true,
            },
          },
          userIDToken: "abc123",
          server: {
            wallet: {
              paypal: {
                instruments: [
                  {
                    type: instrument,
                    label: "••1337",
                    oneClick: instrument === "card" || instrument === "balance",
                  },
                ],
              },
              credit: {
                instruments: [
                  {
                    type: instrument,
                    label: "••1337",
                    oneClick: instrument === "card" || instrument === "balance",
                  },
                ],
              },
            },
          },
        });

        buttonOpts.push({
          fundingSource: "credit",
          fundingEligibility: {
            paypal: {
              eligible: true,
            },
            credit: {
              eligible: true,
            },
          },
          userIDToken: "abc123",
          server: {
            wallet: {
              paypal: {
                instruments: [
                  {
                    type: instrument,
                    label: "••1337",
                    oneClick: instrument === "card" || instrument === "balance",
                  },
                ],
              },
              credit: {
                instruments: [
                  {
                    type: instrument,
                    label: "••1337",
                    oneClick: instrument === "card" || instrument === "balance",
                  },
                ],
              },
            },
          },
        });
      }
    }

    for (const instrument of instruments) {
      buttonOpts.push({
        style: {
          color: "blue",
        },
        fundingEligibility: {
          paypal: {
            eligible: true,
          },
          paylater: {
            eligible: true,
          },
        },
        userIDToken: "abc123",
        server: {
          wallet: {
            paypal: {
              instruments: [
                {
                  type: instrument,
                  label: "••1337",
                  oneClick: instrument === "card" || instrument === "balance",
                },
              ],
            },
          },
        },
      });
    }

    for (opts of buttonOpts) {
      for (const width of widths) {
        const button = paypal.Buttons(opts);
        if (button.isEligible()) {
          const p = document.createElement("p");
          p.style.minWidth = width;
          document.body.appendChild(p);
          button.render(p);
        } else {
          console.warn(`Not eligible`, opts);
        }
      }
    }
  </script>
</body>
